<template>
  <div class="main-tabs">
    <!-- <el-scrollbar :noresize="true"> -->
    <ul>
      <li v-for="(item, index) in tagViewList" :class="{ 'active': item.isSelected }" :key="index"
        @click="handleTagViewClick(item)">
        <div class="square left"></div>
        <div class="square right"></div>
        <div class="title">{{ item.meta.title }}</div>
        <div class="close" @click="handleTagClose(item)">
          <el-icon :size="16">
            <close />
          </el-icon>
        </div>
      </li>
    </ul>
    <!-- </el-scrollbar> -->
  </div>
</template>

<script setup>
import { getCurrentInstance, watch, computed } from 'vue'

defineOptions({
  name: 'mainTabs'
})

// 初始化操作
const { appContext } = getCurrentInstance()
const { $router, $route, $store } = appContext.config.globalProperties

// 获取 view 并进行初始化处理
let tagViewList = $ref(computed(() => $store.state.menu.tagViewList))
let cRoute = computed(() => $router.currentRoute)

watch(cRoute, newRoute => {
  let route = $ref(newRoute)
  tagViewList.map(item => {
    item.isSelected = item.path === route.path
    return item
  })
}, { deep: true, immediate: true })

/**
 * 切换 tabs
 * @param {*} scope 
 */
const handleTagViewClick = (options) => {
  $router.push(options.fullPath)
  $store.commit('menu/SET_CURRENT_TAG_VIEWS', options)
}

/**
 * 关闭 tag 操作
 * @param {*} scope 
 */
const handleTagClose = (options) => {
  $store.dispatch('menu/delTabsView', options)
  $store.dispatch('user/delCachedPages', [options.name])
  let paths = tagViewList.map(item => item.fullPath)
  if (options.isSelected) {
    setTimeout(() => {
      $router.push(paths.slice(-1)[0])
    }, 300)
  }
}
</script>

<style scoped lang="scss">
:deep(.el-scrollbar__bar) {
  position: relative;
  z-index: 8;
  // &.is-horizontal {
  //   display: none !important;
  // }
}

.main-tabs {
  width: calc(100% - 0px);
  height: 47px;
  padding-left: 16px;
  background: #fff;
  padding-top: 10px;

  ul {
    display: flex;
    height: 37px;

    li {
      height: 37px;
      line-height: 40px;
      font-size: 15px;
      border-radius: 5px 5px 0 0;
      max-width: 130px;
      min-width: 100px;
      list-style: none;
      cursor: pointer;
      display: inline-block;
      padding: 0 10px;
      margin-right: 5px;
      position: relative;
      display: flex;
      justify-content: space-between;
      box-sizing: content-box;

      .square {
        width: 8px;
        height: 8px;
        position: absolute;
        z-index: 2;
        background: #ececec;
        display: none;

        &.left {
          left: -8px;
          bottom: 0px;
        }

        &.right {
          right: -8px;
          bottom: 0px;
        }
      }

      &:before {
        content: "";
        display: block;
        clear: both;
        width: 16px;
        height: 16px;
        position: absolute;
        left: -16px;
        bottom: 0px;
        background: #fff;
        z-index: 3;
        border-radius: 50%;
        display: none;
      }

      &:after {
        content: "";
        display: block;
        clear: both;
        width: 16px;
        height: 16px;
        position: absolute;
        right: -16px;
        bottom: 0px;
        background: #fff;
        z-index: 3;
        border-radius: 50%;
        display: none;
      }

      &.active {
        background: #EBEDF0;

        .square {
          display: block;
        }

        &:before {
          display: block;
        }

        &:after {
          display: block;
        }
      }

      .title {
        max-width: 90px;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        font-size: 12px;
      }

      .close {
        width: 16px !important;
        height: 16px !important;
        color: #888889;
        position: absolute;
        top: 10px;
        right: 8px;

        &:hover {
          color: #333;
        }
      }
    }
  }
}

.el-icon {
  top: -7px;
}
</style>